<template>
  <div style="text-align:'center'; height:100%" class="unknown-viewer-container">
    <div class="unknown-viewer-content">
      <a :href="fileUrl" target="_blank">
        <div class="c-download-file folded-corner">
          <div class="c-cloud">
            <i class="fa fa-cloud-download" />
          </div>
          <div :class="['c-file-ext', 'c-ellipsis', 'c-ext-'+fileExt]">
            {{fileExt}}
          </div>
        </div>
      </a>
    </div>
    <div class="unknown-file-info">
      {{ `${path} - ${size}` }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['path', 'size'],
    computed: {
      fileUrl: function () {
        return ''
      },
      fileExt: function () {
        const dotPos = this.path.lastIndexOf('.')
        if (dotPos > 0) {
          return this.path.split('.').slice(-1)[0]
        } else {
          return 'bin'
        }
      }
    }
  }

</script>
